<script setup>
import {onMounted, ref} from "vue";
import {
  createCatalog,
  deleteCatalog,
  getIndexVDO,
  listCatalogTree,
  selectCatalog,
  updateCatalog
} from "../../../http/cms/catalog.js";
import {CommonStore} from "../../../stores/counter.js";


const indexVDO = ref({
  siteList: [],
  dataStatus: {
    ukId: "",
    code: "",
    name: "",
    dictItemList: []
  }
})

const currentSite = ref("")

const catalogTreeList = ref([])

const showCatalogForm = ref(false)
const catalogUpdate = ref(false)
const catalogForm = ref({})

function handleSiteChange(){
  listCatalogTree(currentSite.value.ukId).then(response => {
    catalogTreeList.value = response.data
  })
}

function handleCatalogRowClick(catalog) {
  selectCatalog(catalog.ukId).then(response => {
    catalogForm.value = response.data
  })
}

function showCatalogCreate(parentUkId) {
  catalogUpdate.value = false
  catalogForm.value = {}
  catalogForm.value = {
    siteUkId: currentSite.value.ukId,
    parentUkId: parentUkId,
    status: 'enable'
  }
  showCatalogForm.value = true
}

function showCatalogUpdate(catalog) {
  catalogUpdate.value = true
  catalogForm.value = catalog
  showCatalogForm.value = true
}

function handleCatalogCreate() {
  createCatalog(catalogForm.value).then(response => {
    handleSiteChange()
    showCatalogForm.value = false
  })
}

function handleCatalogUpdate() {
  updateCatalog(catalogForm.value).then(response => {
    handleSiteChange()
    showCatalogForm.value = false
  })
}

function handleCatalogSave() {
  if (catalogUpdate.value) {
    handleCatalogUpdate()
  }else {
    handleCatalogCreate()
  }
}

function handleCatalogDelete(ukId) {
  deleteCatalog(ukId).then(response => {
    handleSiteChange()
  })
}

function handleIndexVDO() {
  getIndexVDO().then(response => {
    indexVDO.value = response.data
  })
}

onMounted(() => {
  handleIndexVDO()
})


</script>

<template>

  <div style="display: flex; flex-flow: column nowrap; flex: auto; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-select
          style="width: 200px; height: 30px"
          v-model="currentSite"
          value-key="ukId"
          placeholder="选择站点"
          @change="handleSiteChange()"
      >
        <el-option
            v-for="item in indexVDO.siteList"
            :key="item.ukId"
            :label="item.name"
            :value="item"
        />
      </el-select>
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="catalogName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCatalogList">查询</el-button>
          <el-button type="primary" @click="showCatalogCreate()">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          :data="catalogTreeList"
          row-key="ukId"
          border
          default-expand-all
          highlight-current-row
          @row-click="handleCatalogRowClick"
      >
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="status" label="状态" width="70">
          <template #default="scope">
            <el-switch
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button @click.stop="showCatalogCreate(scope.row.ukId)">
              新建下级
            </el-button>
            <el-button @click.stop="showCatalogUpdate(scope.row)">
              修改
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm.stop="handleCatalogDelete(scope.row.ukId)"
                :title="'是否确认删除栏目 [ ' + scope.row.name + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog title="新建栏目"
             @close="catalogForm = {}"
             v-model="showCatalogForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="catalogForm" label-width="80px">
      <el-form-item label="上级栏目">
        <el-tree-select
            check-strictly=true
            node-key="ukId"
            :props="CommonStore().treeProps"
            v-model="catalogForm.parentUkId"
            :data="catalogTreeList"
        />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="catalogForm.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="catalogForm.status">
          <el-option
              v-for="item in indexVDO.dataStatus.dictItemList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="catalogForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showCatalogForm = false; catalogForm = {}">Cancel</el-button>
        <el-button type="primary" @click="handleCatalogSave">Save</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>
</style>